<!DOCTYPE html>
<html>
  <title>v-model和radio结合使用</title>
  <script src="../../js/vue.js"></script>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="div1">
      <!-- 
        1. name指定相同时，提交表单时不能重复，才能达到只选择一个的效果 
        2. 当v-model绑定都是绑定sex时，name="sex"可以省略
      -->
      <label for="male">
        <input type="radio" id="male" name="sex" value="男" v-model="sex" />男
      </label>
      <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex" />女
      </label>
      <h2>您选择的性别是：{{sex}}</h2>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#div1",
      data: {
        sex: "男"
      }
    });
  </script>
</html>
